<template>
    <div id="journalism">
        <div class='left'>
            <div class="left-top">
                <ul>
                    <li class="li1">医院新闻
                        <ol id="ol1">
                            <li><h4>>万里逆行 援非启航---安钢医院</h4><span>2021-01-29</span></li>
                            <li><h4>>万里逆行 援非启航---安钢医院</h4><span>2021-01-29</span></li>
                            <li><h4>>万里逆行 援非启航---安钢医院</h4><span>2021-01-29</span></li>
                            <li><h4>>万里逆行 援非启航---安钢医院</h4><span>2021-01-29</span></li>
                            <li><h4>>万里逆行 援非启航---安钢医院</h4><span>2021-01-29</span></li>
                        </ol>
                    </li>
                    <li class="li2">通知公告
                        <ol id="ol2">
                            <li><h4>>告广大就诊患者的一封信</h4><span>2020-03-25</span></li>
                            <li><h4>>告广大就诊患者的一封信</h4><span>2020-03-25</span></li>
                            <li><h4>>告广大就诊患者的一封信</h4><span>2020-03-25</span></li>
                            <li><h4>>告广大就诊患者的一封信</h4><span>2020-03-25</span></li>
                            <li><h4>>告广大就诊患者的一封信</h4><span>2020-03-25</span></li>
                        </ol>
                    </li>
                    <li class="li3">人才招聘
                        <ol id="ol3">
                            <li><h4>>安钢医院成功举行临床实验室</h4><span>2021-01-29</span></li>
                            <li><h4>>安钢医院成功举行临床实验室</h4><span>2021-01-29</span></li>
                            <li><h4>>安钢医院成功举行临床实验室</h4><span>2021-01-29</span></li>
                            <li><h4>>安钢医院成功举行临床实验室</h4><span>2021-01-29</span></li>
                            <li><h4>>安钢医院成功举行临床实验室</h4><span>2021-01-29</span></li>
                        </ol>
                    </li>
                    <li>更多></li>
                </ul>

                

                

                
            </div>
        </div>
        <div class='right'>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img src="../assets/img/sw1.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/img/sw2.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/img/sw3.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/img/sw4.jpg" alt="">
            </van-swipe-item>
            </van-swipe>
        </div>

        <div class="tu">
            <img src="../assets/img/Sss.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'journalism',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#journalism{
    width: 1134px;
    overflow: hidden;
    height: 410px;
    margin: 20px auto 0 ;
    .left{
        width: 500px;
        height: 280px;
        float: left;
        .left-top{
            width: 500px;
            height: 60px;
            border-bottom: 1px solid #ccc;
            ul{
                list-style: none;
                justify-content: space-between;
                align-items: center;
                display: flex;
                height: 60px;
                box-sizing: border-box;
                font-size: 18px;
                position: relative;
                padding-left: 20px;
                .li1{
                    padding-left: 20px;
                    border-left: 4px solid red;
                }
                .li1:hover{
                    font-weight: 700;
                    #ol2,#ol3{
                        display: none;
                    }
                    #ol1{
                        display: block;
                    }

                }
                .li2:hover{
                    font-weight: 700 ;
                    #ol1,#ol3{
                        display: none !important;
                    }
                    #ol2{
                        display: block;
                    }

                }
                .li3:hover{
                    font-weight: 700;
                    #ol2,#ol1{
                        display: none !important;
                    }
                    #ol3{
                        display: block;
                    }

                }
            }
            #ol1,#ol2,#ol3{
                position: absolute;
                top: 60px;
                left: 0;
                display: none;
                 list-style: none;
                li{
                    display: flex;
                    height: 40px;
                    padding-right: 24px;
                    align-items: center;
                    justify-content: space-between;
                    h4{
                        color: #535353;
                    }
                    h4:hover{
                        color: red;
                    }
                    span{
                        color: #8C8C8C;
                        
                    }
                }
            }
            #ol1{
                display: block;
                
            }
        }
    }
    .right{
        width: 500px;
        height: 280px;
        float: right;
        img{
        width: 100%;
        height: 280px;
        }
    }
    .tu{
        margin-top: 300px;
        width:1134px ;
        height:107px ;
        img{
            width: 100%;
            height: 100%;
        }
    }

}
/deep/{
     .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 280px;
    box-sizing: border-box;
    text-align: center;
    background-color: #39a9ed;
    
  }
}
</style>
